<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  keyWord: '',
  commentContent: '',
  informationTitle: '',
  createName: '',
  updateTime: [],
});

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/comment/pageAdmin', {
    method: 'post',
    data: {
      commentContent: form.value.commentContent,
      informationTitle: form.value.informationTitle,
      createName: form.value.createName,
      pageNum: page,
      pageSize: 20,
      startTime: form.value.updateTime?.[0],
      endTime: form.value.updateTime?.[1],
    },
    loadingStatus: loading,
  });
  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}
const hide = async (id: string, commentState: number) => {
  const { isSuccess } = await $fetch('/admin/comment/hide', {
    method: 'post',
    data: {
      id: id,
      commentState: commentState === 1 ? 3 : 1,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.view.comment.index.notification.success'));
    search.value.refresh();
  }
};
const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/comment/delete', {
    method: 'post',
    data: {
      id: id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.view.comment.index.notification.del'));
    search.value.refresh();
  }
};
onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #header>
        <AFormItem :label="$t('settings.view.comment.index.comments')">
          <AInput v-model="form.commentContent" allow-clear />
        </AFormItem>
        <AFormItem :label="$t('settings.view.comment.index.user')">
          <AInput v-model="form.createName" allow-clear />
        </AFormItem>
        <AFormItem :label="$t('settings.view.comment.index.title')">
          <AInput v-model="form.informationTitle" allow-clear />
        </AFormItem>
        <AFormItem :label="$t('settings.view.comment.index.time')">
          <ARangePicker v-model="form.updateTime" />
        </AFormItem>
      </template>

      <template #columns>
        <ATableColumn :title="$t('settings.view.comment.index.comments')" data-index="commentContent" tooltip ellipsis />

        <ATableColumn :title="$t('settings.view.comment.index.reviewArticle')" tooltip ellipsis>
          <template #cell="{ record }">
            <ALink :href="`/explore/journalism/detail/${record.informationId}`" target="_blank">
              {{ record.informationTitle }}
            </ALink>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.comment.index.user')" :width="300">
          <template #cell="{ record }">
            <ALink :href="`${atomgitUrl}/${record.createName}`" target="_blank">
              {{ record.createNickName || record.createName }}
            </ALink>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.comment.index.time')" data-index="createTime" :width="220" />

        <ATableColumn :title="$t('settings.view.comment.index.operate')" :width="180">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton type="primary" size="small" v-confirm v-if="record.commentState == 3" @click="hide(record.id, record.commentState)">
                {{ $t('settings.view.comment.index.show') }}
              </AButton>
              <AButton
                v-if="record.commentState == 1"
                size="small" v-confirm
                @click="hide(record.id, record.commentState)"
              >
                {{ $t('settings.view.comment.index.hide') }}
              </AButton>
              <AButton
                type="primary" status="danger" size="small" v-confirm
                @click="remove(record.id)"
              >
                {{ $t('settings.view.comment.index.del') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped></style>
